import Breadcrumb from '@/src/app/components/breadcrumb'
import { getTranslations } from 'next-intl/server'
import { fetcher } from '@/src/utils/fetcher'
import { objectToQueryString } from '@/src/utils/object-to-query-string'
import BackButton from './components/back-button'
import GeneratePDFButton from './components/generate-pdf-button'
import { cookies } from 'next/headers'
import PictureGrid from './components/picture-grid'
import { Link } from '@/src/navigation'
import Image from 'next/image'

import emailIcon from '@/public/email_white.png'

interface ListCellProps {
  label: string
  children: React.ReactNode
  direction?: 'row' | 'col'
}

const ListCell: React.FC<ListCellProps> = (props) => {
  const { label, children, direction = 'row' } = props
  return (
    <div
      className={`flex border-b-[1px] border-b-solid border-b-[#EBEBEB] text-[0.75rem] leading-[1rem] text-[#333333] font-medium 2xl:text-[1.125rem] 2xl:leading-[1.5rem] ${
        direction === 'row'
          ? 'h-[3.625rem] lg:h-[3rem] 2xl:h-[4.5rem] justify-between items-center'
          : 'flex-col py-[1.375rem] space-y-2 lg:py-[0.9375rem] 2xl:py-[1.40625rem]'
      }`}
    >
      <div>{label}</div>
      <div className={direction === 'col' ? 'text-[#999999]' : ''}>
        {children}
      </div>
    </div>
  )
}

interface PageProps {
  params: {
    slug: string
  }
}

const Page: React.FC<PageProps> = async (props) => {
  const { params } = props

  const cookieStore = cookies()
  const detailQuery = {
    cpid: params.slug,
  }
  const [t, bt, detail, generalConfig] = await Promise.all([
    getTranslations('productDetail'),
    getTranslations('breadcrumb'),
    fetcher<Product>(`/api/index/cpInfo?${objectToQueryString(detailQuery)}`, {
      cookieStore,
    }),
    fetcher<GeneralConfig>('/api/index/indexConfig', { cookieStore }),
  ])

  // 邮箱
  const emails = generalConfig.email.split(',')
  // 图片
  const images = detail.images.split(',')
  // 视频
  const videos = detail.vido ? detail.vido.split(',') : []
  // 视频封面图
  const videoThumbs = detail.vido_image ? detail.vido_image.split(',') : []

  // 判断一个字符串是否包含数字
  const isNumericStr = (str: string) => /\d/.test(str)

  return (
    <main>
      <div className='px-[0.9375rem] lg:px-0 lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px]'>
        {/* 导航栏的高度 */}
        <div className='h-[3.2rem] lg:h-[4.75rem] 2xl:h-[7.125rem]'></div>
        <div className='hidden lg:block'>
          <div className='lg:h-[2rem] 2xl:h-[3rem]' />
          <Breadcrumb
            items={[
              { label: bt('home'), path: '/' },
              { label: bt('productIntroduction'), path: '/products' },
              { label: detail.title, active: true },
            ]}
          />
        </div>
        {/* 间距 */}
        <div className='h-[0.9375rem] lg:h-5 2xl:h-[1.875rem]'></div>
        {/* 返回按钮和生成PDF按钮 */}
        <div className='relative flex justify-between items-center'>
          <BackButton>{t('back')}</BackButton>
          {/* PC 端标题 */}
          <h1 className='hidden lg:block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#333333] text-[1rem] leading-[1.4rem] font-bold text-center 2xl:text-[1.5rem] 2xl:leading-[2.1rem]'>
            {detail.new_title}
          </h1>
          <GeneratePDFButton>{t('generatePDF')}</GeneratePDFButton>
        </div>
        <div className='lg:hidden'>
          <div className='h-6' />
          {/* 移动端标题 */}
          <h1 className='text-[#333333] text-[1rem] leading-[1.4rem] font-bold text-center lg:hidden'>
            {detail.new_title}
          </h1>
        </div>
        <div className='h-5 2xl:h-[1.875rem]' />
        <PictureGrid
          images={images}
          videos={videos}
          videoThumbs={videoThumbs}
        />
        <div className='h-[1.46875rem] lg:h-12 2xl:h-[4.5rem]' />
        {/* 介绍 */}
        <div>
          <div className='px-[0.78125rem] py-[0.96025rem] bg-black text-white text-[0.875rem] leading-[0.875rem] lg:p-[1.0625rem] 2xl:p-[1.59375rem] 2xl:text-[1.3125rem] 2xl:leading-[1.3125rem]'>
            {t('introduction')}
          </div>
          <div className='flex flex-col lg:flex-row-reverse lg:justify-between'>
            {/* head */}
            <div className='w-full border-[1px] border-solid border-[#EBEBEB] px-[0.6875rem] pt-3 py-4 lg:w-[57%] lg:mt-6 lg:p-4 2xl:mt-[2.25rem] 2xl:p-6'>
              <h2 className='text-[#333333] text-[1rem] font-bold leading-[1.4rem] 2xl:text-[1.5rem] 2xl:leading-[2.1rem]'>
                {detail.new_title}
              </h2>
              <small className='text-[0.75rem] leading-[1rem] text-[#666666] font-medium 2xl:text-[1.125rem] 2xl:leaidng-[1.5rem]'>
                {detail.con}
              </small>
              <div className='h-2 lg:h-4 2xl:h-6' />
              <strong className='text-[#91B01C] text-[1.0625rem] lg:text-[1.1875rem] 2xl:text-[1.78125rem]'>
                {detail.price}
              </strong>
              <div className='h-[0.65625rem] lg:h-5 2xl:h-[1.875rem]' />
              {isNumericStr(detail.price) ? (
                <Link
                  href='/message'
                  className='uppercase w-full flex justify-center items-center h-[2.5rem] bg-[#91B01C] rounded-[0.3125rem] text-white text-[1rem] leading-[1rem] font-bold lg:h-[3.1875rem] 2xl:h-[4.78125rem] 2xl:text-[1.5rem] 2xl:leading-[1.5rem]'
                >
                  {t('contactUs')}
                </Link>
              ) : (
                <div className='space-y-3'>
                  {emails.map((email) => {
                    return (
                      <button
                        key={email}
                        className='uppercase w-full flex justify-center items-center h-[2.5rem] bg-[#91B01C] rounded-[0.3125rem] text-white text-[1rem] leading-[1rem] font-bold lg:h-[3.1875rem] 2xl:h-[4.78125rem] 2xl:text-[1.5rem] 2xl:leading-[1.5rem]'
                      >
                        <div className='relative w-[1rem] h-[0.8125rem] mr-2 lg:w-[1.3125rem] lg:h-[1.0625rem] lg:mr-2 2xl:w-[1.96875rem] 2xl:h-[1.59375rem] 2xl:mr-3'>
                          <Image
                            src={emailIcon}
                            alt='email icon'
                            fill
                            sizes='6vw'
                          />
                        </div>
                        {email}
                      </button>
                    )
                  })}
                </div>
              )}
            </div>
            <div className='h-1'></div>
            {/* list */}
            <div className='lg:w-[39%] lg:mt-2 2xl:mt-3'>
              <ListCell label={t('year')}>{detail.year}</ListCell>
              <ListCell label={t('manufacturer')}>
                {detail.manufacturer_name}
              </ListCell>
              <ListCell label={t('model')}>{detail.model_name}</ListCell>
              <ListCell label={t('hours')}>{detail.hours}</ListCell>
              <ListCell label={t('category')}>{detail.category_name}</ListCell>
              <ListCell label={t('specialInstructions')} direction='col'>
                {detail.special}
              </ListCell>
            </div>
          </div>
        </div>
        <div className='h-[1.78175rem] lg:h-[2.3125rem] 2xl:h-[3.46875rem]' />
      </div>
    </main>
  )
}

export default Page
